<template>
  <div class="search-result">
    <div class="search-tag">
      <h2 class="tag-title"><span>{{searchTag.tagTitle}}</span><span class="return" @click="fallBack"><i class="icon iconfont icon-houtui"></i></span></h2>
      <span class="tag-number">Machine in Warranty Number:{{searchTag.tagNum}}</span>
      <!--<div class="tag-show">-->
        <!--<span v-for="(item, index) in searchTag.tagShow">{{item}}</span>-->
      <!--</div>-->
    </div>
    <div class="search-tab">
      <div class="tab-content">
        <div class="transaction">
          <div style="width: 100%;overflow: hidden">
            <!--<el-input v-model="TransactionDocument.search" size="mini" @input="globalSearch('machineOptions', 'TransactionDocument.search')" placeholder="Global Filter-->
<!--"></el-input>-->
            <!--<div class="">{{$t('newSearchResult.total')}}：{{AccountList.total}}</div>-->
            <ag-grid-vue style="width: 100%; height: 450px;" class="ag-theme-balham"
                         :gridOptions="machineOptions"
                         :enableColResize="true"
                         :enableSorting="true"
                         :enableFilter="true"
                         :groupHeaders="false"
                         :suppressRowClickSelection="true"
                         :toolPanelSuppressGroups="false"
                         :toolPanelSuppressValues="true">
            </ag-grid-vue>
          </div>
          <div class="block f-r">
            <el-pagination
              @size-change="prestoSizeChange"
              @current-change="prestoCurrentChange"
              :current-page="TransactionDocument.currentPage3"
              :page-sizes="[50, 100, 200, 500, 1000]"
              :page-size="TransactionDocument.pageSize3"
              layout="sizes, prev, pager, next"
              :total="TransactionDocument.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {AgGridVue} from "ag-grid-vue";
  export default {
    name: 'searchResult2',
    components: {
      'ag-grid-vue': AgGridVue
    },
    data() {
      return {
        machineOptions: {
          columnDefs: [
            {headerName: "Sales Order Num", field: "sales_order_num"},
            {headerName: "Sales Order Item", field: "sales_order_item"},
            {headerName: "Delivery Num", field: "delivery_num"},
            {headerName: "Delivery Item", field: "delivery_item", tooltipField: "product"},
            {headerName: "Delivery Gi Date", field: "delivery_gi_date"},
            {headerName: 'Billing Num', field: "billing_num", width: 100, enableSorting: false},
            {headerName: "Billing Item", field: "billing_item"},
            {headerName: "Billing Date", field: "billing_date"},
            {headerName: "Sell In Geo", field: "sell_in_geo", tooltipField: "material"},
            {headerName: "Sell In Region", field: "sell_in_region"},
            {headerName: "Sell In Country Name", field: "sell_in_country_name"},
            {headerName: "Prod Final BU", field: "prod_final_bu"},
            {headerName: "Division", field: "division", tooltipField: "material_description"},
            {headerName: "Prod Brand", field: "prod_brand"},
            {headerName: "Prod Series", field: "prod_series"},
            {headerName: "Prod Family", field: "prod_family"},
            {headerName: "Distribution Channel", field: "distribution_channel"},
            {headerName: "Ebr Segment", field: "ebr_segment"},
            {headerName: "Sold To", field: "sold_to"},
            {headerName: "Sold To Name", field: "sold_to_name"},
            {headerName: "End Customer", field: "end_customer", tooltipField: "bp_name"},
            {headerName: "End Customer Name", field: "end_customer_name"},
            {headerName: "Sell In Qty", field: "sell_in_qty", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn",comparator: numSort},
            {headerName: "Sdrev($K)", field: "sdrev", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn",comparator: numSort},
            {headerName: "Gross Profit", field: "gross_profit", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn",comparator: numSort},
            {headerName: "Prod Activation Qty", field: "prod_activation_qty", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn",comparator: numSort},
          ],
          toolPanelSuppressRowGroups: true
        },
        tabLoading: false,
        tabHeight:window.innerHeight*0.65,
        searchTag: {
          tagTitle: '',
          tagNum: '',
          tagShow: []
        },
        show: 1,
        butTab: 'REV',
        // 表格数据
        TransactionDocument: {
          search: '',
          transactionTableData: [],
          total: null,
          pageSize3: 50,
          currentPage3: 1
        },
        // 路由传参
        search_value: '',
        result_flag: '',
        page: 1
      }
    },
    methods: {
      // 分页
      handleSizeChange3(val) {
        this.tabLoading = true
        this.TransactionDocument.pageSize3 = val
        this.jumpTransaction()
      },
      handleCurrentChange3(val) {
        this.tabLoading = true
        this.TransactionDocument.currentPage3 = val
        this.jumpTransaction()
      },
      prestoSizeChange(val) {
        console.log(val,'prestoSizeChange');
        this.TransactionDocument.pageSize3 = val// 设置当前页展示多少条
        this.TransactionDocument.currentPage3=1;
//        this.filterTab.currentPage=1;
        this.prestoHandleData()
      },
      prestoCurrentChange(val) {
        console.log(val,'prestoCurrentChange');
        this.TransactionDocument.currentPage3 = val // 设置当前页是第几页
        this.prestoHandleData()
      },
      prestoHandleData() {
        console.log(this.TransactionDocument.transactionTableData,'this.TransactionDocument.transactionTableData');
        console.log(this.TransactionDocument.pageSize3,'this.TransactionDocument.pageSize3');
        console.log(this.TransactionDocument.currentPage3,'this.TransactionDocument.currentPage3');
        this.machineOptions.api.setRowData(this.TransactionDocument.transactionTableData.slice((this.TransactionDocument.currentPage3-1)*this.TransactionDocument.pageSize3, this.TransactionDocument.currentPage3*this.TransactionDocument.pageSize3))
      },
      // 分页
      change(n) {
        this.show = n
      },
      fallBack() {
        this.$router.go(-1)
      },
      formatter(row, column) {
        return row.address
      },
      jumpProfile() {
        const _this = this
        this.axios.post('/search/getProfile.do', {
          search_value: _this.search_value,
          flag: _this.result_flag
        }).then(response => {
          if (response.status === 200) {
//            console.log('profile头部请求成功')
            var resData = response.data.data
            var item = []
            _this.searchTag.tagNumber = resData['Account Number']
            let filterRows = resData.rows[0].filter(item => item !== '')
            _this.searchTag.tagShow = filterRows
          }
        })
//        this.http({
//          method: 'post',
//          url: 'http://10.120.193.101:8080/cbi/getProfile.do',
//          data: {
//            search_value: _this.search_value,
//            flag: _this.result_flag
//          },
//          transformRequest: [function(data) {
//            let ret = ''
//            for (let it in data) {
//              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
//            }
//            return ret
//          }],
//          headers: {
//            'Content-Type': 'application/x-www-form-urlencoded'
//          }
//        }).then(function(response) {
//          if (response.status === 200) {
//            var resData = response.data.data
//            var item = []
//            _this.searchTag.tagNumber = resData['Account Number']
//            let filterRows = resData.rows[0].filter(item => item !== '')
//            _this.searchTag.tagShow = filterRows
//          }
//        }).catch(function(error) {
//          console.log(error)
//        })
      },
      jumpTransaction() {
        const _this = this
        this.axios.post('/search/productdetail.do', {
          search_value: _this.search_value,
          page: _this.TransactionDocument.currentPage3,
          rows: _this.TransactionDocument.pageSize3
        }).then(response => {
          if (response.status === 200) {
            var resData = response.data.data
            _this.TransactionDocument.currentPage3 = resData.page
            _this.TransactionDocument.total = resData.total
            var filterDate = resData.rows.map(item => {
//              console.log(Number(item.gross_profit).toFixed(2))
//              item.gross_profit = parseInt(item.gross_profit)取整sell_in
              item.sell_in = parseInt(item.sell_in)
              item.gross_profit = Number(item.gross_profit).toFixed(2)
              item.sd_rev = Number(item.sd_rev).toFixed(2)
              return item
            })
            _this.TransactionDocument.transactionTableData = filterDate
            _this.machineOptions.api.setRowData(_this.TransactionDocument.transactionTableData)
            _this.tabLoading = false
          }
        })
//        this.http({
//          method: 'post',
//          url: 'http://10.120.193.101:8080/cbi/productdetail.do',
//          data: {
//            search_value: _this.search_value,
//            page: _this.TransactionDocument.currentPage3,
//            rows: _this.TransactionDocument.pageSize3
//          },
//          transformRequest: [function(data) {
//            let ret = ''
//            for (let it in data) {
//              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
//            }
//            return ret
//          }],
//          headers: {
//            'Content-Type': 'application/x-www-form-urlencoded'
//          }
//        }).then(function(response) {
//          if (response.status === 200) {
//            var resData = response.data.data
//            _this.TransactionDocument.currentPage3 = resData.page
//            _this.TransactionDocument.total = resData.total
//            var filterDate = resData.rows.map(item => {
// //              console.log(Number(item.gross_profit).toFixed(2))
//              item.gross_profit = Number(item.gross_profit).toFixed(2)
//              item.sd_rev = Number(item.sd_rev).toFixed(2)
//              return item
//            })
//            _this.TransactionDocument.transactionTableData = filterDate
//          }
//        }).catch(function(error) {
//          console.log(error)
//        })
      },
      // TestIntroduction() {
      //   this.machineOptions.api.setColumnDefs([
      //     {headerName: '中文', field: "billing_num", width: 100, enableSorting: false},
      //     {headerName: "12313", field: "distr_chan"},
      //     {headerName: "13241", field: "zedcusna", tooltipField: "bp_name"},
      //     {headerName: "Gross Profit", field: "gross_profit"},
      //     {headerName: "Zedcusna D", field: "zedcusna_d"},
      //     {headerName: "Delivery Item", field: "delivery_item", tooltipField: "product"},
      //     {headerName: "Geo", field: "geo", tooltipField: "material"},
      //     {headerName: "Division", field: "division", tooltipField: "material_description"},
      //     {headerName: "Delivery Num", field: "delivery_num"},
      //     {headerName: "Sold Desc", field: "solddesc"},
      //     {headerName: "SO Item", field: "so_item"},
      //     {headerName: "Segment", field: "segment"},
      //     {headerName: "Country Name", field: "country_name", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn"},
      //     {headerName: "Final BU", field: "final_bu", cellRenderer: Thousandth, filter: "agNumberColumnFilter", type: "numericColumn"},
      //     {headerName: "Sell In", field: "sell_in"},
      //     {headerName: "Brand", field: "brand"},
      //     {headerName: "SD Rev", field: "sd_rev"},
      //     {headerName: "Activation Qty", field: "activation_qty"},
      //     {headerName: "Product", field: "product"},
      //     {headerName: "SO Num", field: "so_num"},
      //     {headerName: "Billing Date", field: "billing_date"},
      //     {headerName: "Sold To", field: "sold_to"},
      //     {headerName: "Delivery Date", field: "delivery_date"},
      //     {headerName: "Billing Item", field: "billing_item"},
      //     {headerName: "Series", field: "series"},
      //     {headerName: "Region", field: "region"}
      //   ])
      // }
    },
    mounted() {
//      alert(window.screen.height)
//      console.log(this.$route.query.search_value)
      this.search_value = this.$route.query.search_value
      this.result_flag = this.$route.query.result_flag
      this.searchTag.tagTitle = this.$route.query.resultTitle
      this.searchTag.tagNum = this.$route.query.tagNum
      this.jumpTransaction()
    }
  }
  function numSort(data1, data2) {
    var Number1 = parseFloat(data1) || data1
    var Number2 = parseFloat(data2) || data2
    if (!!Number1 === !!null && !!Number2 === !!null) {
      return 0
    }
    if (!!Number1 === !!null) {
      return -1
    }
    if (!!Number2 === !!null) {
      return 1
    }
    return Number1 - Number2
  }
  function Thousandth(params) {
    return comdify(params.value.toString())
    // return params.rowIndex
  }
  function comdify(n) {
    var re = /\d{1,3}(?=(\d{3})+$)/g;
    var n1 = n.replace(/^(^-?\d+)((\.\d+)?)$/, function(s, s1, s2) {
      return s1.replace(re, "$&,") + s2
    })
    return n1
  }
  function index(params) {
    let index = params.rowIndex + 1
    return index.toString()
    // return params.rowIndex
  }
</script>

<style lang="scss" scoped>
  .search-result {
    background-color: #fff;
    .search-tag {
      padding-bottom: 10px;
      background-color: #f6f7fb;
      .tag-title {
        margin-bottom: 10px;
        color: #1E90FF;
      }
      .return {
        display: inline-block;
        font-size: 16px;
        float: right;
        padding: 5px 10px;
        cursor: pointer;
        .icon-houtui {
          font-size: 20px;
        }
      }
      .tag-number {
        color: #1E90FF;
        font-weight: bold;
      }
      .tag-show {
        margin-top: 10px;
        font-size: 12px;
        color: #fff;
        span {
          display: inline-block;
          padding: 3px 5px;
          border-radius: 10px;
          margin-right: 5px;
          background-color: #7f21e0;
        }
        span:nth-child(1) {
          background-color: #00ce05;
        }
        span:nth-child(2) {
          background-color: #1e90ff;
        }
        span:nth-child(3) {
          background-color: #f17c68;
        }span:nth-child(4) {
           background-color: #ffbf00;
         }
        span:nth-child(5) {
          background-color: #fd60af;
        }
        span:nth-child(6) {
          background-color: #62f05f;
        }

      }
    }
    .search-tab {
      background-color: #f5f5f5;
      .active{
        color: #46a3e1!important;
      }
      .tab-content {
        .f-r {
          float: right;
          margin-top: 3vh;
        }
        .profile {
          padding-top: 15px;
          text-align: center;
          .but-tab {
            text-align: center;
            .el-button {
              border-radius: 100px;
              margin-right: 10px;
            }
          }
          .echart {
            text-align: center;
            margin-left: 80px;
          }
        }
        .account {
        }
      }
    }
  }
</style>
